<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数字： <input type="text" v-model="number"><br>
        数字： <input type="text" v-model="a.b"><br>
        数字： <input type="text" v-model="a.c"><br>
        数字(后期监视)： <input type="text" v-model="number2"><br>
        数字(简写)： <input type="text" v-model="number3"><br>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                number2: 1,
                msg: 'cyh',
                number: 0,
                //a属性中保存的值是一个对象的内存地址
                a: {
                    b: 0,
                    c: 1
                },
                number3: 3
            },
            computed: {
                he() {
                    return 'hah' + this.number
                }
            },
            watch: {
                //可以监视多个属性
                //监视哪个属性，把这个属性的名字拿过来即可
                //可以监视Vue的原有属性
                number: {
                    //初始化的时候调用一次handler方法
                    immediate: true,
                    //这里有一个固定写死的方法，方法名必须叫做：handler
                    //handler方法什么时候被调用？当被监视的属性发生变化的时候，handler就会被自动调用一次
                    //handler方法上有两个参数： 第一个参数是newValue，第二个参数是oldValue
                    //newValue是属性值改变之后的新值
                    //oldValue是属性值改变之前的旧值
                    handler(newValue, oldValue) {
                        console.log(newValue, oldValue);
                        //this是当前的Vue实例
                        //如果该函数时箭头函数，这个this是window对象
                        console.log(this);
                    }
                },
                //如果监视的属性具有多级结构，一定要添加单引号： 'a.b'
                // 'a.b': {
                //     handler(a, b) {
                //         console.log('@');
                //     }
                // }

                a: {
                    //启用深度监视，默认是不开启深度监视的
                    //当年需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视
                    deep: true,
                    handler(a, b) {
                        console.log(1);
                    }
                },

                //监视某个属性的时候，也有简写形式 当只有handler回调函数的时候，可以使用简写形式
                number3(a, b) {
                    console.log(a, b);
                }

                // 也可以监视计算属性
                // he: {
                //     handler(a, b) {
                //         console.log(a, b);
                //     }
                // }
            }
        })
        //后期添加监视调用Vue相关的API即可
        //语法：vm.$watch('被监视的属性名',{})
        // vm.$watch('number2', {
        //     immediate: true,
        //     deep: true,
        //     handler(a, b) {
        //         console.log(a, b);
        //     }
        // })

        // 后期添加监视的简写方式
        vm.$watch('number2', function (a, b) {
            console.log(a, b);
        })
    </script>
</body>

</html>